<template>
    <!-- 显示所有的地址 -->
    <div class="shippingList">
        <div class="title">我的地址</div>
        <ul>
            <li v-for="(shipping, index) in shippingList" :key="index" @click="shippingId = shipping.id">
                <span :class="['contact', shipping.id == shippingId ? 'selectShipping' : '']">{{shipping.receiverName}}</span>
                <span class="shippingess"> {{shipping.receiverProvince}} {{shipping.receiverCity}} {{shipping.receiverDistrict}} {{shipping.receiverAddress}}</span>
            </li>
        </ul>
    </div>

    <!--  显示所有选中的购物车  -->
    <div class="cartList">
        <div class="title">我的商品</div>
        <ul>
            <li v-for="(cart, index) in cartList" :key="index">
                <el-row>
                    <el-col :span="1" style="margin-right: 10px;">
                        <el-image
                            :src="cart.productImage"
                            style="width: 50px; height: 50px;"
                            fit="contain" />
                    </el-col>
                    <el-col :span="3">{{ cart.productName }}</el-col>
                    <el-col :span="3">￥{{ cart.productPrice }}元</el-col>
                    <el-col :span="1">x{{ cart.count }}</el-col>
                    <el-col :span="3">总价: ￥{{ cart.productPrice * cart.count }}元</el-col>
                </el-row>
            </li>
        </ul>
    </div>

    <!--  显示总金额和生成订单按钮  -->
    <div class="footer">
        总金额: ￥<span class="total">{{ total }}</span>元
        <el-button type="danger" class="createOrder" @click="createOrder">生成订单</el-button>
    </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import shippingApi from "@/api/shippingApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import cartApi from "@/api/cartApi.js";
import orderApi from "@/api/orderApi.js";
import {useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
// console.log(route.query.cartIds);
//当前用户的所有地址信息
const shippingList = ref([]);
//当前用户选中的购物车
const cartList = ref([]);
//被选中的地址 - 用来生成订单的地址ID
const shippingId = ref(null);
//总金额
const total = ref(0);

//生成订单
function createOrder() {
    //判断有没有选择地址
    if(!shippingId.value) {
        ElMessage.error("请选择收货地址");
        return;
    }

    //已选择的购物车地址
    let cartIds = route.query.cartIds;
    let orderDTO = {
        shippingId: shippingId.value,
        cartIds: cartIds
    }

    //发送请求生成订单
    orderApi.add(orderDTO).then(result => {
        ElMessage.success(result.msg);
        //去支付页面
        router.push({
            path: '/pay',
            query: {
                orderNo: result.data
            }
        });

    });
}

//获取当前用户的所有地址
function getShippingList() {
    shippingApi.selectByUserId().then(result => {
        shippingList.value = result.data;
        for (let shipping of shippingList.value) {
            if(shipping.status == 1) {
                shippingId.value = shipping.id;
            }
        }
    });
}

//查询当前用户已选择的购物车信息
function getCartList() {
    let cartIds = route.query.cartIds;
    cartApi.selectByIds(cartIds).then(result => {
        cartList.value = result.data;
        //计算总金额
        cartList.value.forEach(cart => {
            total.value += cart.count * cart.productPrice;
        })
    })
}

getCartList();
getShippingList();
</script>

<style scoped>
.shippingList, .cartList, .footer {
    margin: 20px 0px;
    padding: 20px;
    border: 2px solid #222;
    background-color: #FFF;
}

.footer {
    text-align: right;
}

.footer .createOrder {
    margin-left: 15px;
}

.footer .total {
    font-weight: bold;
    font-size: 18px;
    color: var(--theme-color);
}

.title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
}

.shippingList ul li {
    margin: 10px 0px 10px 15px;
    height: 30px;
    line-height: 30px;
}

.shippingList .contact {
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    border: 2px solid #AAA;
    width: 80px;
    cursor: pointer;
}

.shippingList .contact:hover {
    border: 2px solid var(--theme-color);
}

.shippingList .selectShipping {
    border: 2px solid var(--theme-color);
}

.cartList ul li {
    margin: 10px 0px 10px 15px;
    height: 50px;
    line-height: 50px;
}
</style>